import React, { ChangeEvent, useState } from "react";
import styled from "styled-components";
import { Form, Input, message, Modal, Popover } from "antd"
import { PhoneTwoTone, UpSquareTwoTone, MessageTwoTone, MehTwoTone } from "@ant-design/icons";
import weixin from "@/assets/images/common/weixin_icon.png"
import orgService from "@/api/index";
const Container = styled.div`
  background-color: #fff;
  border-radius: 6px 0 0 6px;
  box-shadow: 0 0 7px #0000004d;
  position: fixed;
  right: 0;
  top: 40%;
  z-index: 99999;
  .item-list {
    align-items: center;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 10px;
    padding: 12px;
    position: relative;
    width: 50px;
  }
  .top{
    color: #1677ff
  }
`;

const Inputs = styled.div`
  
  .input {
    border: 2px solid transparent;
    width: 100%;
    height: 3rem;
    padding-left: 0.8em;
    outline: none;
    overflow: hidden;
    background-color: #F3F3F3;
    border-radius: 10px;
    transition: all 0.5s;
    margin-bottom: 10px;
    border: 1px solid #4A9DEC;
}

.input:hover,
.input:focus {
  border: 2px solid #4A9DEC;
  box-shadow: 0px 0px 0px 7px rgb(74, 157, 236, 20%);
  background-color: white;
}

`

const text = <span className="text-xl">手机号</span>;
const content = <div>
  <p className="text-blue-400 text-2xl">17391900505</p>
</div>

const content1 = <div>
  <img className="h-36 w-36" src={weixin}></img>
</div>

const text1 = <span className="text-center text-xl">扫一扫加微信</span>

const handleClick = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth',
  });
}




const TipsBox: React.FC = () => {
  const [open, setOpen] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [modalText, setModalText] = useState('Content of the modal');

  const handleOk = () => {
    setModalText('The modal will be closed after two seconds');
    saveHandle()
  }

  const showModal = () => {
    setOpen(true);
  };

  const handleCancel = () => {
    console.log('Clicked cancel button');
    setOpen(false);
  };
  const [names, setNames] = useState<any>("")
  const [phone, setPhone] = useState<any>("")
  const [concatName, setConcatName] = useState<any>("")
  const [goodsName, setgoodsName] = useState<any>("")

  const textChangeHandler = (event: ChangeEvent) => {
    setNames((event.target as HTMLInputElement).value);
  };

  const textChangeHandler1 = (event: ChangeEvent) => {
    setPhone((event.target as HTMLInputElement).value);
  };

  const textChangeHandler2 = (event: ChangeEvent) => {
    setConcatName((event.target as HTMLInputElement).value);
  };

  const textChangeHandler3 = (event: ChangeEvent) => {
    setgoodsName((event.target as HTMLInputElement).value);
  };


  const saveHandle = () => {
    if (!names) {
      return message.warning('请输入公司名称')

    }
    if (!phone) {
      return message.warning('请输入联系电话')
    }
    if (!goodsName) {
      return message.warning('请输入产品名称')
    }
    if (!concatName) {
      return message.warning('请输入联系人')
    }

    setConfirmLoading(true);
    orgService.saveQuestion({
      "def1": names,
      "def2": goodsName,
      "def3": concatName,
      "descp": phone,
    }).then(res => {
      if (res) {
        setConfirmLoading(false);
        message.info('提交成功')
        setOpen(false)
      }
    })
  }

  return (
    <>
      <Container>
        <div className="item-list">
          <Popover placement="left" title={text} content={content}>
            <div className="w-full flex flex-col items-center" style={{ width: "70px" }}>
              <PhoneTwoTone className="mb-2.5" style={{ fontSize: "20px" }} />
              <p className="text-2xl">电话</p>
            </div>
          </Popover>
        </div>
        <div className="item-list">
          <Popover placement="left" title={text1} content={content1}>
            <div className="w-full flex flex-col items-center" style={{ width: "70px" }}>
              <MessageTwoTone className="mb-2.5" style={{ fontSize: "20px" }} />
              <p className="text-2xl">微信</p>
            </div>
          </Popover>
        </div>
        <div className="item-list">
          <div className="w-full flex flex-col items-center" onClick={showModal} style={{ width: "70px" }}>
            <MehTwoTone className="mb-2.5" style={{ fontSize: "20px" }} />
            <p className="text-2xl">咨询</p>
          </div>
        </div>
        <div className="item-list">
          <div className="w-full flex flex-col items-center" onClick={handleClick} style={{ width: "70px" }}>
            <UpSquareTwoTone className="mb-2.5" style={{ fontSize: "20px" }} />
          </div>
        </div>
      </Container>

      <Modal
        title="咨询"
        open={open}
        onOk={handleOk}
        confirmLoading={confirmLoading}
        onCancel={handleCancel}
        cancelText="关闭"
        okText="提交"
      >
        <Inputs>
          <input className="input" value={names}
            onChange={textChangeHandler} placeholder="公司名称" />
        </Inputs>
        <Inputs>
          <input className="input" value={goodsName}
            onChange={textChangeHandler3} placeholder="产品名称" />
        </Inputs>
        <Inputs>
          <input className="input" value={concatName}
            onChange={textChangeHandler2} placeholder="联系人" />
        </Inputs>
        <Inputs>
          <input className="input" value={phone}
            onChange={textChangeHandler1} placeholder="电话" />
        </Inputs>
      </Modal>
    </>
  );
};

export default TipsBox;
